<template>
    <div class="container">
        <div class="square">
            <el-radio-group v-model="selectedItems" @change="handleSelect">
                <div v-for="item in items" :key="item.id" class="item-container">
                    <el-radio :label="item.id" class="radio">
                        <span :class="{ 'completed': item.completed }">
                            <span class="custom-circle" :class="{ 'active': item.completed }">
                                <span v-if="item.completed" class="checkmark">✔️</span>
                            </span>
                            {{ item.content }}
                        </span>
                    </el-radio>
                    <div class="underline"></div> <!-- 添加下划线 -->
                </div>

            </el-radio-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const items = ref([
    { id: 1, content: '完成项目报告并提交给经理', completed: false },
    { id: 2, content: '准备下周的团队会议材料', completed: false },
    { id: 3, content: '更新产品文档', completed: true },  // 已完成
    { id: 4, content: '进行用户体验测试并反馈结果', completed: false },
    { id: 5, content: '整理客户反馈并提出改进建议', completed: true },  // 已完成
    { id: 6, content: '参加在线培训课程并完成相关测评', completed: false },
    { id: 7, content: '与开发团队讨论新功能需求', completed: true },  // 已完成
    { id: 8, content: '制定营销计划，提升产品知名度', completed: false },
    { id: 9, content: '分析上季度销售数据，并撰写分析报告', completed: true },  // 已完成
    { id: 10, content: '与团队成员一对一沟通，了解工作进展', completed: false },
]);

const selectedItems = ref([]); // 确保初始化为数组

const handleSelect = (value) => {
    const selectedItem = items.value.find(item => item.id === value);
    if (selectedItem) {
        // 切换完成状态
        selectedItem.completed = !selectedItem.completed;

        // 根据状态更新 selectedItems
        if (selectedItem.completed) {
            selectedItems.value.push(value);
        } else {
            selectedItems.value = selectedItems.value.filter(id => id !== value);
        }
    }
};
</script>

<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
}

.square {

    max-height: 300px; /* 设置最大高度 */


    width: 500px;
    border: none;
    /* 隐藏边框 */
    border-radius: 8px;

    overflow-y: auto;
}

.item-container {
    margin: 5px 0;
    /* 每个任务之间的间隔 */
    position: relative;
}

.radio {
    width: 420px;
    display: block;
    /* 确保单选框在新的一行 */
}

/* 隐藏默认的单选框 */
.el-radio__input {
    display: none;
    /* 隐藏默认圆圈 */
}

/* 自定义圆圈样式 */
.custom-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    /* 默认圆圈颜色 */
    border-radius: 50%;
    margin-right: 5px;
    /* 圆圈与文本间隔 */
    position: relative;
    vertical-align: middle;
    /* 垂直居中 */
    transition: background-color 0.3s, border-color 0.3s;
}

.active {
    background-color: green;
    /* 圆圈变为绿色 */
    border-color: darkgreen;
    /* 边框颜色变化 */
}

.checkmark {
    color: white;
    /* 对勾为白色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 居中对勾 */
}

/* 禁用 el-radio 选中状态下的文字颜色变化 */
.radio .el-radio__label {
    color: inherit;
    /* 继承文本颜色 */
}

.radio.is-checked .el-radio__label {
    color: inherit;
    /* 保持选中状态下的文本颜色不变 */
}

.radio.is-checked .custom-circle {
    border-color: darkgreen;
    /* 改变选中状态下的边框颜色 */
}

/* 下划线样式 */
.underline {
    width: 100%;
    /* 下划线宽度 */
    height: 1px;
    /* 下划线高度 */
    background-color: rgb(235, 238, 245);
    /* 浅灰色 */
    margin-top: 5px;
    /* 与内容之间的间距 */
}
</style>